<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>JFinal Controller 返回特定格式数据-JSON</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="JFinal,JFinal视频教程,JFinal极速开发实战教程,小木学堂">
	<meta http-equiv="description" content="小木学堂-最专业的JFinal极速开发实战教程">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
	<!-- 本案例自定义css样式表 -->
	<link rel="stylesheet" href="assets/css/xmxt.css">
	<script src="assets/js/jquery1.10.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/js/jquery.form.js"></script>
	<script type="text/javascript" src="assets/js/json2.js"></script>
	<style type="text/css">
		.hideit{
		display: none;
		}
	 a{
		display: block;
	}
	 a:hover{
		color:red;
	}
	a:active{
		color:blue;
	}
	</style>
	<script type="text/javascript">
	/**
	 * T模板
	 */
	(function(){function c(a){this.t=a}function l(a,b){for(var e=b.split(".");e.length;){if(!(e[0]in a))return!1;a=a[e.shift()]}return a}function d(a,b){return a.replace(h,function(e,a,i,f,c,h,k,m){var f=l(b,f),j="",g;if(!f)return"!"==i?d(c,b):k?d(m,b):"";if(!i)return d(h,b);if("@"==i){e=b._key;a=b._val;for(g in f)f.hasOwnProperty(g)&&(b._key=g,b._val=f[g],j+=d(c,b));b._key=e;b._val=a;return j}}).replace(k,function(a,c,d){return(a=l(b,d))||0===a?"%"==c?(new Option(a)).innerHTML.replace(/"/g,"&quot;"):
	a:""})}var h=/\{\{(([@!]?)(.+?))\}\}(([\s\S]+?)(\{\{:\1\}\}([\s\S]+?))?)\{\{\/\1\}\}/g,k=/\{\{([=%])(.+?)\}\}/g;c.prototype.render=function(a){return d(this.t,a)};window.t=c})();

	 var formatJson = function(json, options) {
	 	var reg = null,
	 		formatted = '',
	 		pad = 0,
	 		PADDING = '    '; // one can also use '\t' or a different number of spaces
	  
	 	// optional settings
	 	options = options || {};
	 	// remove newline where '{' or '[' follows ':'
	 	options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
	 	// use a space after a colon
	 	options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
	  
	 	// begin formatting...
	 	if (typeof json !== 'string') {
	 		// make sure we start with the JSON as a string
	 		json = JSON.stringify(json);
	 	} else {
	 		// is already a string, so parse and re-stringify in order to remove extra whitespace
	 		json = JSON.parse(json);
	 		json = JSON.stringify(json);
	 	}
	  
	 	// add newline before and after curly braces
	 	reg = /([\{\}])/g;
	 	json = json.replace(reg, '\r\n$1\r\n');
	  
	 	// add newline before and after square brackets
	 	reg = /([\[\]])/g;
	 	json = json.replace(reg, '\r\n$1\r\n');
	  
	 	// add newline after comma
	 	reg = /(\,)/g;
	 	json = json.replace(reg, '$1\r\n');
	  
	 	// remove multiple newlines
	 	reg = /(\r\n\r\n)/g;
	 	json = json.replace(reg, '\r\n');
	  
	 	// remove newlines before commas
	 	reg = /\r\n\,/g;
	 	json = json.replace(reg, ',');
	  
	 	// optional formatting...
	 	if (!options.newlineAfterColonIfBeforeBraceOrBracket) {			
	 		reg = /\:\r\n\{/g;
	 		json = json.replace(reg, ':{');
	 		reg = /\:\r\n\[/g;
	 		json = json.replace(reg, ':[');
	 	}
	 	if (options.spaceAfterColon) {			
	 		reg = /\:/g;
	 		json = json.replace(reg, ': ');
	 	}
	  
	 	$.each(json.split('\r\n'), function(index, node) {
	 		var i = 0,
	 			indent = 0,
	 			padding = '';
	  
	 		if (node.match(/\{$/) || node.match(/\[$/)) {
	 			indent = 1;
	 		} else if (node.match(/\}/) || node.match(/\]/)) {
	 			if (pad !== 0) {
	 				pad -= 1;
	 			}
	 		} else {
	 			indent = 0;
	 		}
	  
	 		for (i = 0; i < pad; i++) {
	 			padding += PADDING;
	 		}
	  
	 		formatted += padding + node + '\r\n';
	 		pad += indent;
	 	});
	  
	 	return formatted;
	 };
	
		function ajaxTest1(url,data){
			$("#jsonresult").html("")
			$.ajax({
				url:url,
				type:"post",
				dataType:"json",
				data:data,
				success:function(result){
					$("#jsonresult").html(formatJson(result));
				}
				
			});
		}
		function ajaxTest2(url,data){
			$("#jsonresult").html("")
			$.ajax({
				url:url,
				type:"post",
				dataType:"json",
				data:data,
				success:function(result){
					var tpl=new t($("#tpl").html());
					$("#jsonresult").html(tpl.render(result));
				}
				
			});
		}
		
		function activeIt(index){
			var lis = document.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				if(index==i){
					lis[i].style.color="red";
					lis[i].childNodes.item(0).style.color="red";
				}else{
					lis[i].style.color="#666FFF";
					lis[i].childNodes.item(0).style.color="#666FFF";
				}
			}
		}
			function showIt(index){
				activeIt(index);
				var fieldsets = document.getElementsByTagName("fieldset");
				for(var i=0;i<fieldsets.length;i++){
					if(index==i){
						fieldsets[i].style.display="block";
					}else{
						if(fieldsets[i].id!="result"){
							fieldsets[i].style.display="none";
							}
					}
				}
			}
			
			$(function() {
				$("#imginput1").on("change", function() {
					$("#avatarForm1").ajaxSubmit({
						url : "/renderjson/test13",
						type : "post",
						dataType : "json",
						success : function(data) {
							$("#ajaxresult").html("");
							var img = new Image();
							img.src = data.imgurl;
							img.width = 200;
							img.height = 200;
							$("#jsonresult").append(img);
						}
					});

				});
				$("#imginput2").on("change", function() {
					$("#avatarForm2").ajaxSubmit({
						url : "/renderjson/test14",
						type : "post",
						dataType : "json",
						success : function(data) {
							$("#ajaxresult").html("");
							var img = new Image();
							img.src = data.imgurl;
							img.width = 200;
							img.height = 200;
							$("#jsonresult").append(img);
						}
					});

				});

			});
	</script>
  </head>
  <body>
  <div class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
      <div class="logotxt shadowfont"><h1>JFinal极速开发实战教程</h1></div> 
      <h2 class="text-center shadowfont">小木学堂</h2>
    </div>
  </div>
</div>
</div>
  <div class="container" style="background: #FFF;height:700px;">
  <div class="page-header">
  	<h1>JFinal Controller JSON 专题</h1>
  	</div>
  <div class="row">
  <div class="col-lg-7 col-md-7 col-sm-7">
  	<ol>
  		  <li><a href="javascript:showIt(0)">无参数renderJson()</a></li>
		  <li><a href="javascript:showIt(1)">参数为jsonText renderJson(string)</a></li>
		  <li><a href="javascript:showIt(2)">参数为string数组 renderJson(string[])</a></li>
		  <li><a href="javascript:showIt(3)">参数为key value renderJson(key,value)</a></li>
		  <li><a href="javascript:showIt(4)">参数为object renderJson(object)</a></li>
		  <li><a href="javascript:showIt(5)">参数为JsonRender renderJson(new JsonRender(object jsontext...))</a></li>
		  <li><a href="javascript:showIt(6)">针对IE浏览器处理 ForIE</a></li>
  	</ol>
  	<fieldset class="hideit">
  		<legend>一、无参数renderJson()</legend>
  	<ol>
  	<li><a href="/renderjson/test1" target="_blank">无参数调用renderJson()，需要配合setAttr("name",value)</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test1')" >同上，但是使用AJAX方式 通过获取jsonData可以得到反馈的值</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test2')" >AJAX方式请求，返回Blog列表数据</a></li>
  	<li><a href="javascript:ajaxTest2('/renderjson/test2')" >AJAX方式请求，返回Blog列表数据 并生成DOM</a></li>
  	</ol>
  	</fieldset>
  	<fieldset  class="hideit">
  		<legend>二、参数为jsonText renderJson(string)</legend>
  	<ol>
  	<li><a href="javascript:ajaxTest1('/renderjson/test3')" >错误用法：AJAX方式 renderJson('json数据字符串')</a></li>
  	<li><a href="/renderjson/test3" target="_blank">1的实际情况</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test4')" >正确用法renderJson(json格式文本)</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test5')" >正确用法renderJson(json格式文本) 使用SetAttr("name",value)无效</a></li>
  	</ol>
  	</fieldset>
  	<fieldset  class="hideit">
  		<legend>三、参数为string数组 renderJson(string[])</legend>
  		<label>这里需要配合多个setAttr使用 attr的key 在renderJson的数组中指定  填写哪个key 哪个setattr才有效</label>
  	<ol>
  	<li><a href="javascript:ajaxTest1('/renderjson/test6')" >renderJson(String数组{"jsonData1","jsonData3"}) 可传多个数据</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test7')" >renderJson(String数组{"jsonData2","jsonData3"}) 可传多个数据</a></li>
  	</ol>
  	</fieldset>
  	<fieldset  class="hideit">
  		<legend>四、参数为key value renderJson(key,value)</legend>
  		<label>value是object类型</label>
  	<ol>
  	<li><a href="javascript:ajaxTest1('/renderjson/test8')" >renderJson("jsonData","json数据")</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test9')" >renderJson("jsonData",blogs对象)</a></li>
  	<li><a href="javascript:ajaxTest2('/renderjson/test9')" >renderJson("jsonData",blogs对象)动态生成DOM</a></li>
  	</ol>
  	</fieldset>
  	<fieldset  class="hideit">
  		<legend>五、参数为object renderJson(object)</legend>
  		<label>直接写一个blogs对象的话 产生的json没有key 直接就是blogs列表  如果需要传多个对象 或者希望对象有key的话 使用map</label>
  	<ol>
  	<li><a href="javascript:ajaxTest1('/renderjson/test10')" >AJAX读取blog列表 renderJson(blogs对象)</a></li>
  	<li><a href="javascript:ajaxTest1('/renderjson/test11')" >AJAX读取blog列表 renderJson(map对象)</a></li>
  	</ol>
  	</fieldset>
  	<fieldset  class="hideit">
  		<legend>六、参数为JsonRender render(new JsonRender(object jsonText...))</legend>
  	<ol>
  	<li><a href="javascript:ajaxTest1('/renderjson/test12')" >render(new JsonRender(blogs对象))</a></li>
  	</ol>
  	</fieldset>
  	<fieldset  class="hideit">
  		<legend>七、针对IE浏览器处理 forIE</legend>
  		<label>使用render( new JsonRender(blogs).forIE())</label>
  		<br>
  		<h3>不兼容IEajax上传</h3>
  	<form method="post" id="avatarForm1" enctype="multipart/form-data">
					<input type="file" name="img" id="imginput1">
	</form>
  		<h3>兼容IEajax上传</h3>
  	<form method="post" id="avatarForm2" enctype="multipart/form-data">
					<input type="file" name="img" id="imginput2">
	</form>
  	</fieldset>
  	</div>
  	<div class="col-lg-5 col-md-5 col-sm-5">
  	<fieldset id="result"> 
  	<legend>JSON反馈结果</legend>
  	<div style="border:1px solid #DDD;height:500px;margin: auto;background: #DDD;overflow: auto;">
  	<pre id="jsonresult" style="color:blue;margin: 0" >
  	</pre></div>
  	</fieldset>
  </div>
  </div>
  </div>

<script type="t/template" id="tpl">
<table style="width: 90%;" border="1" cellpadding="0" cellspacing="" class="table table-bordered table-hover">
<tr><th>ID</th><th>title</th><th>publishTime</th></tr>
{{@jsonData}}
<tr><td>{{=_val.id}}</td><td>{{=_val.title}}</td><td>{{=_val.publishTime}}</td></tr>
{{/@jsonData}}
</table>
</script>  	
  	<jsp:include page="../footer.jsp"></jsp:include>
